<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的MVVM模型</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="dome">{{name}}</div>
</body>
    <script>
        Vue.config.productionTip = false;
        Vue.config.devtools = true;
        let num = 18;
        let vm = new Vue({
            el: '#dome',
            data: {
                name: '长沙'
            }
        });
        //通过defineProperty方法，给Vue实例添加属性
        Object.defineProperty(vm, 'age', {
            //当有人访问vm的age属性的时候，会执行这个get函数，返回当前的age的值
            get() {
                console.log('有人访问age属性了');
                return num;
            },
            //当有人修改vm的age属性的时候，会执行这个set函数，把值保存起来
            set(value) {
                console.log('有人设置了age属性');
                num = value;
            },
            //控制属性是否可以被枚举，默认值是false;
            enumerable: true,
            //控制属性是否可以被删除，默认值是false;
            configurable: true,
            //控制属性是否可以被修改，默认值是false;
            writable: true
        })
    </script>
</html>